<template>
	<el-dialog
		:title="titleMap[mode]"
		v-model="visible"
		:width="700"
		destroy-on-close
		append-to-body
		@closed="emits('closed')"
	>
		<el-form
			:model="form"
			:rules="rules"
			ref="dialogForm"
			label-width="80px"
			:style="'el-dialog' === 'el-drawer' ? 'padding:0 20px' : ''"
		>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="车牌号码" prop="number">
						<el-input v-model="form.number" clearable placeholder="请输入车牌号码"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="品牌型号" prop="brand">
						<el-input v-model="form.brand" clearable placeholder="请输入品牌型号"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="驾驶员" prop="user_name">
						<el-input v-model="form.user_name" clearable placeholder="请输入驾驶员"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="车身颜色" prop="color">
						<el-color-picker v-model="form.color" :predefine="proxy.$CONFIG.COLOR_LIST"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="行驶里程(公里)" prop="mileage">
						<el-input v-model="form.mileage" clearable placeholder="请输入行驶里程(公里)"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="发动机型号" prop="engine">
						<el-input v-model="form.engine" clearable placeholder="请输入发动机型号"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="车架号码" prop="frame_number">
						<el-input v-model="form.frame_number" clearable placeholder="请输入车架号码"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="生产厂家" prop="factory">
						<el-input v-model="form.factory" clearable placeholder="请输入生产厂家"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="出厂日期" prop="factory_at">
						<el-date-picker
							v-model="form.factory_at" placeholder="请选择出厂日期"
							type="datetime"
							value-format="YYYY-MM-DD HH:mm:ss"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="年检到期" prop="year_at">
						<el-date-picker
							v-model="form.year_at" placeholder="请选择年检到期"
							type="datetime"
							value-format="YYYY-MM-DD HH:mm:ss"
						/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="保险到期" prop="insurance_at">
						<el-date-picker
							v-model="form.insurance_at" placeholder="请选择保险到期"
							type="datetime"
							value-format="YYYY-MM-DD HH:mm:ss"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="排放等级" prop="level">
						<el-input v-model="form.level" clearable placeholder="请输入排放等级"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="车辆归属" prop="belong">
						<el-select v-model="form.belong" style="width:100%" clearable placeholder="请选择车辆归属">

							<el-option
								v-for="(item, index) in dictData.erp_car_type"
								:key="index" :label="item.label"
								:value="item.value"
							>{{ item.label }}
							</el-option>

						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="车辆价格" prop="peice">
						<el-input v-model="form.peice" clearable placeholder="请输入车辆价格"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="车辆状态" prop="car_status">
						<el-select v-model="form.car_status" style="width:100%" clearable placeholder="请选择车辆状态">

							<el-option
								v-for="(item, index) in dictData.erp_car_status"
								:key="index" :label="item.label"
								:value="item.value"
							>{{ item.label }}
							</el-option>

						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="状态" prop="status">
						<el-switch v-model="form.status" :active-value="proxy.$CONFIG.SWITCH.ENABLE"
											 :inactive-value="proxy.$CONFIG.SWITCH.DISABLE"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="排序" prop="sort">
						<el-input v-model="form.sort" clearable placeholder="请输入排序"/>
					</el-form-item>
				</el-col>
			</el-row>

		</el-form>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script setup>
import {ref, reactive, defineExpose, onMounted, getCurrentInstance} from 'vue'
import {useRouter} from "vue-router";
import {ElMessage} from 'element-plus'
import erpCar from '@/api/apis/erp/erpCar'
import systemDict from '@/api/apis/system/dataDict'


const emits = defineEmits(['success', 'closed'])
const {proxy} = getCurrentInstance();
const router = useRouter();

const mode = ref('add')
const treeList = ref([])
const visible = ref(false)
const isSaveing = ref(false)
const dialogForm = ref(null)

const titleMap = reactive({add: '新增车辆', edit: '编辑车辆'})
const dictData = reactive({
	erp_car_type: [],
	erp_car_status: [],
	platform_data_status: [],

})
const form = reactive({
	id: '0',
	number: '',
	brand: '',
	user_name: '',
	color: proxy.$TOOL.data.get('APP_COLOR') || proxy.$CONFIG.COLOR || '#536dfe',
	mileage: '0',
	engine: '',
	frame_number: '',
	factory: '',
	factory_at:null,
	year_at:null,
	insurance_at:null,
	level: '',
	belong: '1',
	peice: '0',
	car_status: '1',
	status: proxy.$CONFIG.SWITCH.ENABLE,
	sort: '0',
	mer_id: '0',

})
const rules = reactive({
	number: [{required: true, message: '车牌号码必填', trigger: 'blur'}],
	brand: [{required: true, message: '品牌型号必填', trigger: 'blur'}],
	user_name: [{required: true, message: '驾驶员必填', trigger: 'blur'}],

})

onMounted(async () => {
	await getDictData()
	if (router.currentRoute.value.query.open) {
		open('add');
	}
})

const getDictData = () => {
	systemDict.getDict('erp_car_type').then(res => {
		dictData.erp_car_type = res.data
	})
	systemDict.getDict('erp_car_status').then(res => {
		dictData.erp_car_status = res.data
	})
	systemDict.getDict('platform_data_status').then(res => {
		dictData.platform_data_status = res.data
	})

}

const open = (type = 'add') => {
	mode.value = type
	visible.value = true

}

const submit = () => {
	dialogForm.value.validate(async (valid) => {
		if (valid) {
			isSaveing.value = true
			const res = mode.value === 'add' ? await erpCar.save(form) : await erpCar.update(form.id, form)
			if (res.success) {
				emits('success', form, mode.value)
				visible.value = false
				ElMessage.success(res.message)
			} else {
				ElMessage.error(res.message)
			}
			isSaveing.value = false
		}
	})
}

const setData = (data) => {
	for (let k in form) {
		if (data[k] || data[k] === 0) {
			form[k] = data[k]
		}
	}
}


defineExpose({
	open, setData
})
</script>
